<!--
 * @Author: your name
 * @Date: 2021-09-15 09:15:10
 * @LastEditTime: 2021-09-15 09:41:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\6-jQuery\day04\1-canvas.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-canvas</title>
    <!-- jquery引入 -->
    <script src="../js/jquery.js"></script>
</head>

<body>
    <div id="app">
        <canvas id="canvas" width="300" height="300"></canvas>
    </div>
</body>
<script>
    //找到dom节点
    var canvas = $("#canvas")[0];
    //检查浏览器是否支持canvas
    if (canvas.getContext) {
        //创建画笔 这里为2d画笔
        var ctx = canvas.getContext("2d");
        //填充样式
        ctx.fillStyle = "green";
        //画布的宽高都是100，100，起始点位置从10开始
        ctx.fillRect(10, 10, 200, 200);
        //再次画图形
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect(10, 40, 10, 10);
        //再次画图形
        ctx.fillStyle = "rgba(200,0,0,0.5)";
        //绘制矩形边框
        ctx.strokeRect(10, 60, 10, 10);
        //清除矩形边框，使其完全透明
        ctx.clearRect(10, 10, 60, 60);
    } else {
        console.log("你的浏览器不支持canvas功能");
    }
</script>

</html>
</script>

</html>